const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // vue.config.js
  css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer')
          ]
        }
      }
    }
  },
  // 打包后文件的地址(默认打包输出地址dist)
  // 解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题，需设置publicPath
  // 但设置publicPath后会出现android套壳vue打包后无法显示vue的静态资源，需要设置outputDir与assetsDir
  // 基本路径
  // publicPath: '../',
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/',
  // 输出文件目录：在npm run build时，生成文件的目录名称，可以是静态路径也可以是相对路径
  outputDir: 'dist',
  indexPath: 'index.html',
  // 放置打包生成的静态资源 (json、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'static',
  // 构建正式环境时是否使用 thread-loader，该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建
  parallel: false,
  // 用于指定是否在保存文件时执行代码检查（linting）
  lintOnSave: false,
  // 告诉 Webpack 是否需要自动将依赖模块进行转译，使它们能够与当前的代码兼容
  transpileDependencies: true,
  // 允许运行时编译，这样可以动态生成template，满足动态组件的需求
  runtimeCompiler: true,
  // 在构建时是否生成完整的 SourceMap 文件，启用有助于开发者调试代码，可以在浏览器的调试工具中查看到源文件中错误的代码位置，但会导致构建后的代码文件体积增大，而且源代码也存在泄漏的风险
  // 禁用 productionSourceMap 后，会提高构建速度，但会对静态资源的定位产生影响，需要手动配置 webpack.
  // 要想引入其它静态资源（比如图片、字体等），需要将资源放到静态资源目录（static）下，然后使用相对路径引用即可。或者  使用 require 和 import 引入的静态资源，也可以通过相对路径来引入。
  productionSourceMap: false,

  // 前端代理
  devServer: {
    port: 8082, // 你想要指定的端口号，例如：8081
    open: true, // build自动打开浏览器
    https: false, // 启用https
    host: '0.0.0.0', // 允许外部ip访问
    proxy: {
      // 下面的api是监听你请求的接口是否存在api;如存在，会开启反向代理
      '/updateServer': {
        target: 'http://localhost:10777', // 代理地址(目标服务器)
        /* 如果接口跨域，需要配置changeOrigin;开启时在本地会创建一个虚拟服务端，然后发送请求的数据，
        并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题 */
        changeOrigin: true,
        // pathRewrite方法重写url
        pathRewrite: {
          '^/updateServer': '/'
        }
      }
    }
  }
})
